<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
  <link rel="stylesheet" href="./css/home.css">
  <link rel="stylesheet" href="./css/common.css">
  <title></title>
  <style>

    /* iframe{
      height: 100vh;
      width: 100vw;
      box-sizing: border-box;
    } */
    html,body{height: 100vh;margin-bottom: 5rem;}
    .weui-tabbar__item.weui-bar__item--on .weui-tabbar__label{
      color: #FE6162 !important;
    }
    .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon>i, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{

      color: #FE6162 !important;
    }
    .swiper-slide>image{
      margin-right:20px;
    }

    .yuyue{
      background:rgba(254,91,91,1);
      border-radius:5px;
      min-height: 14rem !important;
      padding-bottom: 1rem;
    }
    .querenma{
      color:white;
      border: 0;
    }
    .tishi{
      /* width:116px;
      height:12px; */
      font-size:12px;
      font-family:MicrosoftYaHei;
      font-weight:400;
      color:rgba(255,235,232,1);
      line-height:21px;
    }
    .get{
      font-size: 1rem;
      color:white;
    }
    .newMask{
      background: url("./images/zaqizaba/kaquan.png");
      background-position: left;
      background-repeat: no-repeat;
      background-size:cover;
      width: 84%;
      height: 80vw;
      display: flex;
      align-items: center;
      flex-direction: column;
      border-radius: 5px;
  
    }
    .yicunruwode{
      font-size:12px;
      font-family:Microsoft YaHei;
      font-weight:400;
      color:rgba(102,102,102,1);
      margin-top:10vw;
      margin-bottom: .5rem;
    }
    .newchakanxiangqing{
      width:10rem;
      height:2.5rem;
      background:linear-gradient(90deg,rgba(254,90,91,1) 0%,rgba(254,139,110,1) 100%);
      border-radius:3.8rem;
      color:white;
      line-height: 2.5rem;
      text-align: center;
    }
    .newclose{
      width: 2.2rem;
      height: 2.2rem;
      margin-top: 1rem;
    }
  </style>
</head>

<body>
<!--获得卡券-->
<div class="mask sign_bg" style="display: none;z-index: 99">
  <div style="display: flex;flex-direction: column;align-items: center;">
    <div class="newMask">
      <p class="querenma" style="height: 2rem;color:#FFF600; font-size:24px;margin-top:22px;">恭喜获得卡劵</p>
      <p class="tishi">海澜之家</p>
      
      <img src="./images/O1CN01wC7XMS1Pf7y8xqBDd_!!657171867.jpg" alt="" style="width: 80%;height:7rem;border-radius: 5px;">
      <p class="yicunruwode">已存入我的-卡券装备</p>
      <p class="newchakanxiangqing">查看详情</p>
    </div>
    <img src="./images/zaqizaba/close.png" alt="" class="newclose sign_close">
  </div>
</div>
    <div class="choose_search_bg">

      </div>
      <!--签到-->
      <div class="sign_bg" style="display: none">
        <div class="sign_box">
          <img src="./images/zaqizaba/签到成功.png" alt="">
          <div class="sign_success">
            <p>签到成功</p>
            <p>恭喜你获得魅力值：<span>11</span></p>
            <div class="sign_btn">确认</div>
          </div>
        </div>
        <img class="sign_close" src="./images/zaqizaba/close.png" alt="">
      </div>
      
      <!--中奖了-->
      <div class="sign_win_bg" style="display: none">
        <div class="win_box">
          <img src="./images/zaqizaba/中奖啦.png" alt="">
          <div class="win_success">
            <p>中奖啦!</p>
            <p>恭喜获得阿依莲春熙路店抵扣卷</p>
            <ul class="win_success_card">
              <li>
                <p>￥30</p>
                <p>代金卷</p>
              </li>
              <li>
                <p>满300元减30元使用</p>
                <p>2019.02.23~2019.05.23</p>
              </li>
            </ul>
            <p>领取后将存入我的-我的优惠券</p>
            <div class="win_btn">立即领取</div>
          </div>
        </div>
        <img class="sign_close" src="./images/zaqizaba/close.png" alt="">
      </div>
      
  <div id="page" style="width:100%;height:100%;position: relative;">

      <div class="choose_search_bg">

      </div>
      <div class="home_search">
        <span class="choose_search">成都 <img src="./images/dingwei.png" alt="" class="home_position_icon">
        <ul class="choose_search_list">
          <span></span>
          <li>店铺</li>
          <li>商品</li>
        </ul>
        </span>
        <div class="home_input">
          <img src="./images/zaqizaba/搜索.png" alt="" class="home_search_icon" >
          <input type="text" placeholder="输入要搜索的店铺" style="color: white" id="search">
        </div>
        <span><img src="./images/zaqizaba/编辑2.png" alt="" class="home_sign_icon">签到</span>
      </div>

      <div class="home_banner">
          <div class="first swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide myslide">
                  <img src="./images/TB2kgXUhBcHL1JjSZJiXXcKcpXa_!!129605521.jpg" alt="" class="myslide">
                </div>
                <div class="swiper-slide">
                  <img src="./images/O1CN01wC7XMS1Pf7y8xqBDd_!!657171867.jpg" alt="" class="myslide">
                </div>
                <div class="swiper-slide">
                    <img src="./images/O1CN01wC7XMS1Pf7y8xqBDd_!!657171867.jpg" alt="" class="myslide">
               </div>
              </div>
            </div>


        <img src="./images/搜索空页面.png" alt="">
      </div>
      <ul class="home_icon">
        <li id="fabu">
          <a href="./page/home/"></a>
          <img src="./images/home/sy_xptj.png" alt="">
          新品推荐
        </li>
        <li id="pinpailiansuo">

          <img src="./images/home/sy_ppls.png" alt="">
          品牌连锁
        </li>
        <li id="fujinmendian">

          <img src="./images/home/sy_fjmd.png" alt="">
          附近门店
        </li>
        <li id="guangchang">

          <img src="./images/home/sy_cldp.png" alt="">
          潮流搭配
        </li>
      </ul>

      <div class="home_activity">
        <img src="" alt="">
      </div>

      <div class="home_line"></div>

      <div class="home_box">
        <img class="home_box_title" src="./images/home/sy_pptj.png" alt="">
        <div class="banner">
          <div class="mySwiperBrand swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="images/TB2fpbHbSfD8KJjSszhXXbIJFXa_!!129605521.jpg" alt="" class="littleSlider">
                <img src="images/TB2fpbHbSfD8KJjSszhXXbIJFXa_!!129605521.jpg" alt="" class="littleSlider">
                <img src="images/TB2fpbHbSfD8KJjSszhXXbIJFXa_!!129605521.jpg" alt="" class="littleSlider">

              </div>
              <div class="swiper-slide">
                <img src="./images/O1CN01wC7XMS1Pf7y8xqBDd_!!657171867.jpg" alt="" class="littleSlider">
                <img src="./images/O1CN01wC7XMS1Pf7y8xqBDd_!!657171867.jpg" alt="" class="littleSlider">
                <img src="./images/O1CN01wC7XMS1Pf7y8xqBDd_!!657171867.jpg" alt="" class="littleSlider">
              </div>
              <div class="swiper-slide">
                <img src="./images/TB2kgXUhBcHL1JjSZJiXXcKcpXa_!!129605521.jpg" alt="" class="littleSlider">
                <img src="./images/TB2kgXUhBcHL1JjSZJiXXcKcpXa_!!129605521.jpg" alt="" class="littleSlider">
                <img src="./images/TB2kgXUhBcHL1JjSZJiXXcKcpXa_!!129605521.jpg" alt="" class="littleSlider">

              </div>
            </div>
            <div class="swiper-pagination"> </div><!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
          </div>
        </div>
      </div>

      <div class="home_line"></div>

      <div class="home_box">
        <img class="home_box_title" src="./images/home/sy_fjtj.png" alt="">

        <div class="home_shop">
          <div class="home_shop_title">
            <img src="./images/class.png" alt="" id="godetailto">
            <div class="home_shop_name"  id="godetail">
              <p class="home_shop_name_top shenglv"> <span>品牌</span>特步沙湾旗舰店</p>
              <p class="home_shop_name_bottom"> <span>满200减30</span> <span>换季大减价</span> </p>
            </div>
            <div class="home_follow"><span>+</span>关注</div>
          </div>
          <ul class="home_shop_list">
            <li ><img src="./images/TB2fpbHbSfD8KJjSszhXXbIJFXa_!!129605521.jpg" alt=""></li>
            <li ><img src="./images/TB2fpbHbSfD8KJjSszhXXbIJFXa_!!129605521.jpg" alt=""></li>
            <!--<li ><img src="./images/TB2fpbHbSfD8KJjSszhXXbIJFXa_!!129605521.jpg" alt=""></li>
            &lt;!&ndash; <li ><img src="./images/TB2fpbHbSfD8KJjSszhXXbIJFXa_!!129605521.jpg" alt=""></li> &ndash;&gt;
            <li ><img src="./images/TB2fpbHbSfD8KJjSszhXXbIJFXa_!!129605521.jpg" alt=""></li>
            <li ><img src="./images/TB2fpbHbSfD8KJjSszhXXbIJFXa_!!129605521.jpg" alt=""></li>
            <li ><img src="./images/TB2fpbHbSfD8KJjSszhXXbIJFXa_!!129605521.jpg" alt=""></li>
            <li ><img src="./images/TB2fpbHbSfD8KJjSszhXXbIJFXa_!!129605521.jpg" alt=""></li>
            <li ><img src="./images/TB2fpbHbSfD8KJjSszhXXbIJFXa_!!129605521.jpg" alt=""></li>-->
          </ul>
        </div>

      </div>
      <div class="weui-tabbar" style="position: fixed;bottom:0;">
          <a href="./index.html" class="weui-tabbar__item weui-bar__item_on">
            <div class="weui-tabbar__icon">
              <img src="./images/index_active.png" alt="">
            </div>
            <p class="weui-tabbar__label">尚街</p>
          </a>
          <a href="./page/type.html" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">
              <img src="./images/class.png" alt="">
            </div>
            <p class="weui-tabbar__label">分类</p>
          </a>
          <a href="./page/square.html" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">
              <img src="./images/square.png" alt="">
            </div>
            <p class="weui-tabbar__label">广场</p>
          </a>
          <a href="./page/main.html" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">
              <img src="./images/mine.png" alt="">
            </div>
            <p class="weui-tabbar__label">个人中心</p>
          </a>
      </div>
  </div>






</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>
<!-- <script src="js/common.js"></script> -->
<script src="js/home.js"></script>
</body>
<script>
$("#godetail").click(()=>{
  window.location.href='./page/shop/shopDetails.html'
})
$("#godetailto").click(()=>{
  window.location.href='./page/shop/shopDetails.html'
})
$("#search").click(()=>{
  window.location.href='page/home/search.html'
})

$("#fabu").click(()=>{
  window.location.href='./page/aboutCards/shopCard.html'
})
$("#pinpailiansuo").click(()=>{
  window.location.href='./page/home/bandchain.html'
})
$("#fujinmendian").click(()=>{
  window.location.href='./page/home/nearbyShop.html'
})
$("#guangchang").click(()=>{
  window.location.href='./page/square.html'
})

var mySwiperbanner = new Swiper('.swiper-container.first',{
            autoplay :5000,//可选选项，自动滑动
            loop : true,//可选选项，开启循环

           })

var mySwiperBrand = new Swiper('.mySwiperBrand.swiper-container',{
          autoplay : 0,//可选选项，自动滑动
          loop : true,//可选选项，开启循
          pagination : '.swiper-pagination'
})


$('.myslide').click(()=>{
  window.location.href='./page/shop/goodsDetails.html'
})

$('.littleSlider').click(()=>{
  window.location.href='./page/shop/shopDetails.html'
})
</script>
</html>
